04 Flask之wtforms组件

565次阅读

共计 4555 个字符，预计需要花费 12 分钟才能阅读完成。

在 flask 内部并没有提供全面的表单验证，所以当我们不借助第三方插件来处理时候代码会显得混乱
而官方推荐的一个表单验证插件就是 wtforms, wtfroms 是一个支持多种 web 框架的 form 组件
主要用于对用户请求数据的进行验证，其的验证流程与 django 中的 form 表单 验证有些许类似

官方网站 : https://wtforms.readthedocs.io/en/stable/index.html

参照 Django 中 form 组件功能来进行类比

Forms: 主要用于表单验证、字段定义、HTML 生成，并把各种验证流程聚集在一起进行验证
Fields: 主要负责渲染 (生成 HTML) 和数据转换
Validator: 主要用于验证用户输入的数据的合法性。比如 Length 验证器可以用于验证输入数据的长度
Widgets：html 插件，允许使用者在字段中通过该字典自定义 html 小部件
Meta：用于使用者自定义 wtforms 功能，例如 csrf 功能开启
Extensions：丰富的扩展库，可以与其他框架结合使用，例如 django

pip3 install wtforms

创建 form 类书写组件校验规则

from flask import Flask, render_template, request, redirect
from wtforms import Form
from wtforms.fields import simple
from wtforms import validators
from wtforms import widgets

app = Flask(__name__, template_folder='templates')

app.debug = True


class LoginForm(Form):
    # 字段（内部包含正则表达式）name = simple.StringField(
        label='用户名',
        validators=[validators.DataRequired(message='用户名不能为空.'),
            validators.Length(min=6, max=18, message='用户名长度必须大于 %(min)d 且小于 %(max)d')
        ],
        widget=widgets.TextInput(), # 页面上显示的插件
        render_kw={'class': 'form-control'}

    )
    # 字段（内部包含正则表达式）pwd = simple.PasswordField(
        label='密码',
        validators=[validators.DataRequired(message='密码不能为空.'),
            validators.Length(min=8, message='用户名长度必须大于 %(min)d'),
            validators.Regexp(regex="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}",
                              message='密码至少 8 个字符，至少 1 个大写字母，1 个小写字母，1 个数字和 1 个特殊字符')

        ],
        widget=widgets.PasswordInput(),
        render_kw={'class': 'form-control'}
    )



@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'GET':
        form = LoginForm()
        return render_template('login.html', form=form)
    else:
        form = LoginForm(formdata=request.form)
        if form.validate():
            print('用户提交数据通过格式验证，提交的值为：', form.data)
        else:
            print(form.errors)
        return render_template('login.html', form=form)

if __name__ == '__main__':
    app.run()

login.html : 前端 form 组件渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1> 登录 </h1>
<form method="post">
    <p>{{form.name.label}} {{form.name}} {{form.name.errors[0] }}</p>

    <p>{{form.pwd.label}} {{form.pwd}} {{form.pwd.errors[0] }}</p>
    <input type="submit" value=" 提交 ">
</form>
</body>
</html>

新增字段、钩子函数

from flask import Flask, render_template, request, redirect
from wtforms import Form
from wtforms.fields import core
from wtforms.fields import html5
from wtforms.fields import simple
from wtforms import validators
from wtforms import widgets

app = Flask(__name__, template_folder='templates')
app.debug = True



class RegisterForm(Form):
    name = simple.StringField(
        label='用户名',
        validators=[validators.DataRequired()
        ],
        widget=widgets.TextInput(),
        render_kw={'class': 'form-control'},
        default='alex'
    )

    pwd = simple.PasswordField(
        label='密码',
        validators=[validators.DataRequired(message='密码不能为空.')
        ],
        widget=widgets.PasswordInput(),
        render_kw={'class': 'form-control'}
    )

    pwd_confirm = simple.PasswordField(
        label='重复密码',
        validators=[validators.DataRequired(message='重复密码不能为空.'),
            validators.EqualTo('pwd', message=" 两次密码输入不一致 ")  # 直接关联 pwd 字段进行校验
        ],
        widget=widgets.PasswordInput(),
        render_kw={'class': 'form-control'}
    )

    email = html5.EmailField(
        label='邮箱',
        validators=[validators.DataRequired(message='邮箱不能为空.'),
            validators.Email(message='邮箱格式错误')
        ],
        widget=widgets.TextInput(input_type='email'),
        render_kw={'class': 'form-control'}
    )

    gender = core.RadioField(
        label='性别',
        choices=((1, '男'),
            (2, '女'),
        ),
        coerce=int #“1”“2”)
    city = core.SelectField(
        label='城市',
        choices=(('bj', '北京'),
            ('sh', '上海'),
        )
    )

    hobby = core.SelectMultipleField(
        label='爱好',
        choices=((1, '篮球'),
            (2, '足球'),
        ),
        coerce=int
    )

    favor = core.SelectMultipleField(
        label='喜好',
        choices=((1, '篮球'),
            (2, '足球'),
        ),
        widget=widgets.ListWidget(prefix_label=False),
        option_widget=widgets.CheckboxInput(),
        coerce=int,
        default=[1, 2]
    )

    def __init__(self, *args, **kwargs):
        super(RegisterForm, self).__init__(*args, **kwargs)
        self.favor.choices = ((1, '篮球'), (2, '足球'), (3, '羽毛球'))

    def validate_pwd_confirm(self, field):
        """
        自定义 pwd_confirm 字段规则，例：与 pwd 字段是否一致
        :param field:
        :return:
        """
        # 最开始初始化时，self.data 中已经有所有的值

        if field.data != self.data['pwd']:
            # raise validators.ValidationError(" 密码不一致 ") # 继续后续验证
            raise validators.StopValidation(" 密码不一致 ")  # 不再继续后续验证


@app.route('/register', methods=['GET', 'POST'])
def register():
    if request.method == 'GET':
        form = RegisterForm(data={'gender': 2,'hobby':[1,]}) # initial
        return render_template('register.html', form=form)
    else:
        form = RegisterForm(formdata=request.form)
        if form.validate():
            print('用户提交数据通过格式验证，提交的值为：', form.data)
        else:
            print(form.errors)
        return render_template('register.html', form=form)


if __name__ == '__main__':
    app.run()

register.html : 前端渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1> 用户注册 </h1>
<form method="post" novalidate style="padding:0  50px">
    {% for field in form %}
    <p>{{field.label}}: {{field}} {{field.errors[0] }}</p>
    {% endfor %}
    <input type="submit" value=" 提交 ">
</form>
</body>
</html>

正文完